<template>
  <div id="earth" class="earth">

  </div>
</template>

<script>
import * as Cesium from 'cesium/Cesium';
import CesiumNaveigation from '@/components/navigation/CesiumNavigationUI.js';


export default {
  name: 'HelloWorld',
  data() {
    return {
      viewer: null,
      defaultRectangle: null
    };
  },
  mounted() {
    this.initEarth();
    this.initOptions();
  },
  methods: {
    initEarth() {
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZjA1ZjdiMi1jOTU0LTQxNGMtYWVlMi1mZjQ5YjNlYWZjOGIiLCJpZCI6MTAxOTksInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTU5MjYwOTd9.RQGIE__x7NQ7eSepPr0I4F20Nw72dGDkyCaPo9nRXRI';

      this.viewer = new Cesium.Viewer('earth', {
        animation: false, // 是否显示动画控件
        baseLayerPicker: false, // 是否显示图层选择控件
        homeButton: false, // homebutton
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        sceneModePicker: false, // 是否显示投影方式控件
        navigationHelpButton: false, // 是否显示帮助信息控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        skyAtmosphere: false,//大气层
        shadows: true,
        terrainProvider: Cesium.createWorldTerrain(),
        /// ///////////////////////////天地图//////////////////////////////////////////////
        // imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
        //   url: 'http://{s}.tianditu.gov.cn/vec_c/wmts?service=wmts&request=GetTile&version=1.0.0'
        //     + '&LAYER=vec&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}'
        //     + '&style=default&format=tiles&tk=f4d0553a23372a2f48c74851c7e46f4d',
        //   // url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f4d0553a23372a2f48c74851c7e46f4d',

        //   // url: "http://t1.tianditu.com/vec_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f4d0553a23372a2f48c74851c7e46f4d",
        //   layer: 'tdtCva',
        //   style: 'default',
        //   format: 'tiles',
        //   tileMatrixSetID: 'c',
        //   subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],

        //   tilingScheme: new Cesium.GeographicTilingScheme(),
        //   tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15',
        //     '16', '17', '18', '19',
        //   ],
        //   maximumLevel: 18,
        //   show: false,
        // }),
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f4d0553a23372a2f48c74851c7e46f4d',
          layer: 'tdt',
          minimumLevel: 0,
          maximumLevel: 18,
          style: 'default',
          tileMatrixSetID: 'w',
          format: 'image/jpeg',
        }),
      });
      // 夸张地形
      this.viewer.scene.globe.terrainExaggeration = 8.0;

      // 设置logo不可见
      this.viewer._cesiumWidget._creditContainer.style.display = 'none';
      this.defaultRectangle = Cesium.Rectangle.fromDegrees(
        75.0, // 东
        0.0, // 南
        140.0, // 西
        60.0, // 北
      );
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = this.defaultRectangle


    },
    initOptions() {
      this.initNavigation()
      this.showLightNight(this.viewer,true)
    },
    initNavigation() {
      const options = {
        defaultResetView: this.defaultRectangle,//范围
        enableCompass: true,//罗盘
        enableZoomControls: true,//缩放
        enableDistanceLegend: false,//比例尺
        enableCompassOuterRing: false
      };
      CesiumNaveigation(this.viewer, options);
    },
    /**
     * 
     * @param {*} _viewer 
     * @param {*} isAnimate 是否开启昼夜交替演示
     */
    showLightNight(_viewer, isAnimate) {

      // 启用
      _viewer.scene.globe.enableLighting = true;
      if (isAnimate) {
        _viewer.clock.shouldAnimate = true;
        _viewer.clock.multiplier = 5000;      }
       nightLayer.dayAlpha =1.0;
       _viewer.skyAtmosphere
    }
  },

};
</script>

<style scoped>
.earth {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

}
</style>
